import { View } from '@tarojs/components';
import s from './index.module.scss'
import { useState } from 'react';
import ScrollBar from 'components/ScrollBar'
import Switch from 'components/Switch'
import classNames from 'classnames';


export default function Index() {
  const [active, setActive] = useState(false)
  const [current, setCurrent] = useState(1)
  const [arr, setArr] = useState<any[]>([1])

  const _target = classNames(s.target, {
    [s.active]: active
  })

  const onChange= (number: number) => {
    var _arr = Object.keys(Array.from({length: number}))
    setArr(_arr)
    setCurrent(number)
  }

  return (
    <View className={s.wrapper}>
      <View className={s.container}>
        <ScrollBar title='分割行数' className={s.width} minNum={1} maxNum={5} text_color={'#fff'} onChange={onChange}/>
        <View className={active ? `${s.playground} ${s.active}` : s.playground}>
          {/* 上层 */}
          <View
            id={s.over}
            className={_target}
            style={{ gridTemplateRows: `repeat(${current}, 1fr)`}}
            >
              {arr.map(() => (
                <View className={s.out_box} >
                  <View className={s.inner_box}></View>
                </View>
              ))}
          </View>
          {/* 下层 */}
          <View
            id={s.under}
            className={_target}
            style={{ gridTemplateRows: `repeat(${current}, 1fr)`}}
          >
            {arr.map(() => (
              <View className={s.out_box} >
                <View className={s.inner_box}></View>
              </View>
            ))}
          </View>
        </View>
        <Switch text='展示' state={active} onClick={() => setActive(!active)} />
      </View>
    </View> 
  )
}
